John Frieda
John Frieda is a luxury haircare brand. They pride themselves on delivering professional, salon-quality hair colour at home. Part of this process involves a user choosing the right colour to start with.
John Frieda had a basic ‘pick your colour’ tool. A user would complete a brief questionnaire to define the recommended colours. While the experience was great at discovering the recommendations (they had sophisticated logic), the presentation was awkward.
Our first - and most obvious upgrade - was to add the ability to upload a photo. This let us automatically identify information such as hair colour, and let us present more natural representations of the recommended colours.
We made sure the app was available on any platform, by delivering a responsive solution. We worked hard to optimize the questionnaire, recognizing that it would be a barrier to entry for many users. We reframed some questions, made answers one tap or click, and introduced a progress bar. We reduced the time to complete the questionnaire from an average 2+ minutes, down to 60 seconds.
We welcomed the user with a simple message introducing the key benefits of the app, while introducing them to the interactive nature of the experience.
We used native experiences within a web app. In this example, we let a user drag their photo and pinch to zoom.
We made it easy for the user to switch between their existing and new colour. They just needed to tap their photo. Tapping would show them their before state.
When sharing, it was important to indicate what the user would be sharing: would it be their original photo, their new photo...? So we made sure to include an example of the photo that would be shared.
We created a separate experience for tablet and computers. It followed the same flow, but the screens were redesigned to capitalize on the larger real estate.
In comparison to the mobile experience, where we showed the recommended colours in a slideshow, we felt that there was immense power in showing all shades on one screen. Given that many shades could be difficult to differentiate from each other, showing them in context allows the user to better see the subtle differences.
